<script src="/plugins/ueditor/ueditor.config.js"></script>
<script src="/plugins/ueditor/ueditor.all.min.js"></script>
<script src="/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>


<!-- 右 -->
<div class="content">
    <div class="header">
        <h1 class="page-title">商品编辑</h1>
    </div>

    <!-- edit form -->
    <form action="{:url('/admin/goods/update')}" method="post" id="tab" enctype="multipart/form-data">
        <ul class="nav nav-tabs">
          <li role="presentation" class="active"><a href="#basic" data-toggle="tab">基本信息</a></li>
          <li role="presentation"><a href="#desc" data-toggle="tab">商品描述</a></li>
          <li role="presentation"><a href="#attr" data-toggle="tab">商品属性</a></li>
          <li role="presentation"><a href="#pics" data-toggle="tab">商品相册</a></li>
        </ul>
        <input type="hidden" name="id" value="{$goods.id}">
        {:token()}
        <div class="tab-content">
            <div class="tab-pane fade in active" id="basic">
                <div class="well">
                    <label>商品名称：</label>
                    <input type="text" name="goods_name" value="{$goods.goods_name}" class="input-xlarge">
                    <label>商品价格：</label>
                    <input type="text" name="goods_price" value="{$goods.goods_price}" class="input-xlarge">
                    <label>商品数量：</label>
                    <input type="text" name="goods_number" value="{$goods.goods_number}" class="input-xlarge">
                    <label>商品logo：</label>
                    <input type="file" name="goods_logo" value="" class="input-xlarge">
                    <label>商品分类：</label>
                    <select name="" id="One" class="input-xlarge">
                        <option value="">请选择一级分类</option>
                            {foreach $crte_one as $v}
                                <option value="{$v.id}" {if($v.id == $crte_two.pid)} selected {/if}>{$v.cate_name}</option>
                            {/foreach}
                    </select>
                    <select name="" id="Two" class="input-xlarge">
                        <option value="">请选择二级分类</option>
                            {foreach $crte_two_all as $v}
                                <option value="{$v.id}" {if($v.id == $crte_three.pid)} selected {/if}>{$v.cate_name}</option>
                            {/foreach}
                    </select>
                    <select name="cate_id" id="Three" class="input-xlarge">
                        <option value="">请选择三级分类</option>
                            {foreach $crte_three_all as $v}
                               <option value="{$v.id}" {if($v.id == $crte_three.id)} selected {/if}>{$v.cate_name}</option>
                            {/foreach}
                    </select>
                </div>
            </div>
            <div class="tab-pane fade in" id="desc">
                <div class="well">
                    <label>商品简介：</label>
                    <textarea id="editor" name="goods_body" style="width:1024px;height:500px;">{$goods.goods_body}</textarea>
                </div>
            </div>
            <div class="tab-pane fade in" id="attr">
                <div class="well">
                    <label>商品类型：</label>
                    <select name="type_id" class="input-xlarge">
                        <option value="0">请选择</option>
                        {foreach $type as $v}
                            <option value="{$v.id}" {if($v.id == $goods.type_id)} selected {/if}>{$v.type_name}</option>
                        {/foreach}
                    </select>
                    <div id="attrs">
                        {foreach $attr as $v}
                            <label>{$v.attr_name}</label>
                            {if($v.attr_input_type == 0)}

                                <input type="text" name="attr_value[{$v.id}][]" value="{$new_list[$v['id']][0]}" class="input-xlarge">
                            {elseif($v.attr_input_type == 1) /}

                                <select name="attr_value[{$v.id}][]">
                                    {foreach $v.attr_values as $value}
                                        <option value="{$value}" {if($value == $new_list[$v['id']][0])} selected="selected" {/if}>{$value}</option>
                                    {/foreach}
                                </select>
                            {else /}

                                {foreach $v.attr_values as $value}

                                    <input type="checkbox" name="attr_value[{$v.id}][]" value="{$value}" {in name="value" value="$new_list[$v['id']]"} checked {/in}>{$value}
                                {/foreach}
                            {/if}
                        {/foreach}
                    </div>
                </div>
            </div>
            <div class="tab-pane fade in" id="pics">
                <div class="well">
                    <div>
                        [<a href="javascript:void(0);" class="add">+</a>]
                        商品图片：
                        <input type="file" name="goods_pics[]" value="" class="input-xlarge">
                    </div>
                    {foreach $goods_pics as $v}
                        <div>
                            <img src="{$v.pics_small}" alt="">
                            <a href="javascript:void(0);" pics="{$v.id}" class="picsdel">删除</a>
                        </div>
                    {/foreach}
                </div>
            </div>
            <button class="btn btn-primary" type="submit">保存</button>
        </div>
    </form>
</div>
<script type="text/javascript">

        // 删除多个商品图片
        $(".picsdel").click(function(){

            var id = $(this).attr("pics");
            if(id == "") return;

            var that = this;
            $.ajax({
                url:"{:url('admin/goods/picsdel')}",
                data:"id="+id,
                success:function(res){
                    if(res.code != 10000)
                    {
                        alert(res.msg);
                        return;
                    }
                    $(that).parent().remove();
                }
            })
        })


        // 商品属性概况
        $("select[name=type_id]").change(function(){
            $("#attrs").html('');

            var id = $(this).val();
            if(id == 0) return;

            $.ajax({
                url:"{:url('admin/attribute/getTree')}",
                data:"id="+id,
                success:function(res){
                    if(res.code != 10000){
                        alert(res.msg);
                        return;
                    }
                    // 显示属性名称 遍历数组 拼接数组
                    // 定义空的变量 用来接受数据和 最后追加到页面
                    var str = '';
                    $.each(res.data,function(i,v){
                        str += "<label>"+ v.attr_name +"</label>";
                        // 判断attr_input_type 拼接input下拉列表多选框
                        if(v.attr_input_type == 0){

                            // input输入框
                            str += "<input type='text' name='attr_value["+ v.id +"][]' value='' class='input_xlarge'/>";
                        }else if(v.attr_input_type == 1){

                            // 下拉列表
                            str += '<select name="attr_value['+ id+'][]">';
                            str += '<option value="">===请选择===</option>'
                            $.each(v.attr_values,function(index,value){
                                str += '<option value="'+ value +'">'+ value +'</option>';
                            })
                            str += '</select>'
                        }else{

                            // 多选框
                            $.each(v.attr_values,function(index,value){
                                str += "<input type='checkbox' name='attr_value["+ v.id+"][]' value='"+ value +"'/>" + value;
                            })
                        }
                    });
                    $("#attrs").append(str);
                }
            })

        })

        // 三级分类
        $("#One").change(function(){
            $("#Two").html("<option>请选择二级分类</option>");
            $("#Three").html("<option>请选择三级分类</option>");

            var id = $("#One").val();

            if(id == "") return;

            console.log(11);
            $.ajax({
                url:"{:url('admin/goods/getTree')}",
                data:"id="+id,
                success:function(res){
                    if(res.code != 10000)
                    {
                        alert(res.msg);
                        return;
                    }

                    var html = "";
                    $.each(res.data,function(i,v){
                        html += "<option value='"+ v.id +"'>"+ v.cate_name +"</option>";
                    });

                    $("#Two").append(html);
                }
            })
        })
        $("#Two").change(function(){
            $("#Three").html("<option>请选择三级分类</option>");

            var id = $("#Two").val();

            if(id == "") return;

            console.log(11);
            $.ajax({
                url:"{:url('admin/goods/getTree')}",
                data:"id="+id,
                success:function(res){
                    if(res.code != 10000)
                    {
                        alert(res.msg);
                        return;
                    }

                    var html = "";
                    $.each(res.data,function(i,v){
                        html += "<option name='cate_id' value='"+ v.id +"'>"+ v.cate_name +"</option>";
                    });

                    $("#Three").append(html);
                }
            })
        })

        // 引入ueditor编辑器
        UE.getEditor('editor');

        $('.add').click(function(){
            var add_div = '<div>[<a href="javascript:void(0);" class="sub">-</a>]商品图片：<input type="file" name="goods_pics[]" value="" class="input-xlarge"></div>';
            $(this).parent().after(add_div);
        });
        $('.sub').live('click',function(){
            $(this).parent().remove();
        });
</script>
